<!--
 * @Description: 查看
 * @Author: Huang Junjie
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-09-17 19:49:17
 * @LastEditors: Huang Junjie
-->
<template>
  <div>
    <base-dialog
      width="980px"
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      :show-default-footer="false"
      @open="beforeOpenDialog">
      <div>
        <table id="look-data">
          <tbody v-for="(item, key) in data" :key="key">
            <tr v-if="item.type ==='text'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2">{{ item.column2 }}</td>
              <td v-else>无</td>
              <td>{{ item.column3 }}</td>
              <td v-if="item.column4">{{ item.column4 }}</td>
              <td v-else>无</td>
              <td>{{ item.column5 }}</td>
              <td v-if="item.column6">{{ item.column6 }}</td>
              <td v-else-if="item.column6 === null">无</td>
              <td v-else />
            </tr>
            <tr v-if="item.type ==='textarea'">
              <td>{{ item.column1 }}</td>
              <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
              <td v-else colspan="6">无</td>
            </tr>
            <tr v-if="item.type ==='file'">
              <td colspan="6" class="file-box">
                <div>缺陷照片</div>
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModal" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='file1'">
              <td colspan="6" class="file-box">
                <div>复测照片</div>
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalRetest" />
                <span v-else>无</span>
              </td>
            </tr>
            <tr v-if="item.type ==='file2'">
              <td colspan="6" class="file-box">
                <div>修后照片</div>
                <upload-file
                  v-if="dialog.visible && item.column2 && item.column2.length"
                  ref="upload"
                  :model="fileModalRepair" />
                <span v-else>无</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </base-dialog>
  </div>
</template>

<script>
import { getInfoById } from '@/api/jcwwtk/information'
import UploadFile from '@/views/cms/jcwsc/components/UploadFile'

export default {
  components: {
    UploadFile
  },
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 查看页面数据
      data: [],

      // 附件配置
      fileModal: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'file'
      },

      // 附件配置
      fileModalRetest: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'file'
      },

      // 附件配置
      fileModalRepair: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'file'
      }
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.data = []
        this.getInfoById(this.dialog.form.id) // 根据id查询信息
      }
    }
  },
  methods: {
    // 根据id查询信息
    getInfoById(id) {
      // 根据id查询信息
      getInfoById({
        unitCodeParams: this.dialog.form.unitCodeParams,
        id: id
      }).then(response => {
        response = response.data

        // 组装附件（用于回显）
        var fileArr = []
        if (response.defectImagesList) {
          response.defectImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile(fileArr, 1, 0, 0, true, response.defectImagesList) // 显示附件
        }
        fileArr = []
        if (response.retestImagesList) {
          response.retestImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile1(fileArr, 1, 0, 0, true, response.retestImagesList) // 显示附件
        }
        fileArr = []
        if (response.repairImagesList) {
          response.repairImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile2(fileArr, 1, 0, 0, true, response.repairImagesList) // 显示附件
        }

        this.data = [
          {
            column1: '线路',
            column2: response.seclineName,
            column3: '区间站场',
            column4: response.siteName,
            column5: '支柱号',
            column6: response.pillarNum,
            type: 'text'
          },
          {
            column1: '公里标',
            column2: this.formatRoad(response.roadMark),
            column3: '行别',
            column4: response.directionName,
            column5: '隧道',
            column6: response.tunnelName,
            type: 'text'
          },
          {
            column1: '股道',
            column2: response.trackName,
            column3: '所属工区',
            column4: response.pillarDeptName,
            column5: '发现人',
            column6: response.discoverPerson,
            type: 'text'
          },
          {
            column1: '缺陷来源',
            column2: response.discoverSourceTypeName,
            column3: '缺陷分类',
            column4: response.defectTypeName,
            column5: '缺陷等级',
            column6: response.defectGradeName,
            type: 'text'
          },
          {
            column1: '缺陷部位',
            column2: response.positionName,
            column3: '发现日期',
            column4: response.discoverDate,
            column5: '整改期限',
            column6: response.rectifDatetime,
            type: 'text'
          },
          {
            column1: '整改责任工区',
            column2: response.solveWorkareaName,
            type: 'textarea'
          },
          {
            column1: '缺陷描述',
            column2: response.defectInfoDesc,
            type: 'textarea'
          },
          {
            column1: '图片',
            column2: response.defectImagesList,
            type: 'file'
          },
          {
            column1: '缺陷成因',
            column2: response.defectReasonName,
            column3: '处理人',
            column4: response.solvePersonal,
            column5: '处理部门',
            column6: response.handleWorkareaName,
            type: 'text'
          },
          {
            column1: '处理日期',
            column2: response.solveDatetime,
            column3: '销号情况',
            column4: response.status === '0' ? '未销号' : (response.status === '1' ? '已销号' : response.status),
            type: 'text'
          },
          {
            column1: '图片',
            column2: response.retestImagesList,
            type: 'file1'
          },
          {
            column1: '图片',
            column2: response.repairImagesList,
            type: 'file2'
          }
        ]
      })
    },

    // 显示附件
    showFile(pathList, type, key, index, isDetail, fileList) {
      this.fileModal = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 显示附件
    showFile1(pathList, type, key, index, isDetail, fileList) {
      this.fileModalRetest = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 显示附件
    showFile2(pathList, type, key, index, isDetail, fileList) {
      this.fileModalRepair = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 打开弹框前执行
    beforeOpenDialog() {}
  }
}
</script>

<style lang="scss" scoped>
#look-data {
  border-collapse: collapse;
  width: 100%;
}
#look-data td, #look-data th {
  border: 1px solid #DFE6EC;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#look-data tr td:nth-child(odd){
  width: 15%;
  max-width: 20px;
  padding-left: 20px;
  padding-right: 26px;
  text-align: right;
  background: #E9F2FC;
}
#look-data tr td:nth-child(even){
  max-width: 20px;
  padding-left: 20px;
  padding-right: 20px;
  word-wrap: break-word;
  overflow: hidden;
}
.dialog_box #look-data tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#look-data .file-content {
  min-height: 187px;
}
::v-deep .el-dialog {
  .el-dialog__body {
    min-height: calc(80vh - 100px) !important;
  }
}
</style>
